<template>
    <div  class="center-home">
        <el-container class="contain-home">
            <Top />
            <el-container>
                <el-aside width="200px" v-if="getState() == 0"><NavView /></el-aside>
                <el-aside width="200px" v-if="getState() == 1"><NavBar /></el-aside>
                <el-container>
                  <el-col>
                    <el-breadcrumb separator=">" class="breadcrumb-home">
                      <el-breadcrumb-item v-for="route in breadList" :key="route.path">
                        {{ route.meta.title }}
                      </el-breadcrumb-item>
                    </el-breadcrumb>
                    <el-main class="el-main-home">
                      <router-view />
                      <Chat class="chat-view" v-if="admin === '0'||admin === '1'"/>
                    </el-main>
                  </el-col>
                </el-container>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import {useRouter,useRoute} from 'vue-router'
import NavView from './Nav.vue'
import NavBar from './mainViews/message/NavBar.vue'
import Top from '../components/Top.vue'
import Chat from './Chat.vue'

const router = useRouter()
export default {
    name:   'Home',

    components:{
        Top,
        NavView,
        NavBar,
        Chat,
    },
    
    data(){
        return{
          breadList: [],
          admin: localStorage.getItem('admin')
        }
    },
    watch: {
      $route() {
        this.getBreadcrumb();
      }
    },
    methods:{
      isHome(route) {
        return route.name === "Main";
      },
      getBreadcrumb() {
        let matched = this.$route.matched;
        //如果不是首页
        if (!this.isHome(matched[0])) {
          matched = matched
        }
        this.breadList = matched;
      },
    
      getState(){
        console.log(this.$store.state.count)
        return this.$store.state.count
      }
    },
    created() {
      this.$store.commit('minusState')
    }
  }
</script>

<style scoped>  
  .el-aside {
    text-align: center;
    line-height: 70px;
  }
  
  .el-main-home {
    text-align: center;
    position: relative; /* 设置 el-main 为相对定位 */
    height: 100%;
    width: 100%;
    justify-content: center;
    align-items: center;

  }
  
  body > .el-container {
    margin-bottom: 40px;
  }
  
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
  .center-home {
        height: 100%;
        width: 100%;
  }
  .contain-home{
    margin-top: 80px; /* 设置距离顶部的上边距为92px */
    top: 0;
    width: 100%;
    position: fixed;
    left: 0;
    z-index: 10;
    min-height: 900px;
  }
  html, body {
    margin: 0;
    padding: 0;
}
.breadcrumb-home{
  margin: 20px;
}
.chat-view{
  z-index: 1000; /* 设置一个较高的z-index值 */
  position: fixed;
  bottom: 20px; /* 距离底部的距离 */
  right: 20px; /* 距离右侧的距禒 */

}
</style>